import React, { useMemo, useState } from 'react'

function App() {
  const [list] = useState([1, 2, 3, 4])
  const [isUpdate, setIsUpdate] = useState(true)
  const onClick = () => {
    setIsUpdate(!isUpdate)
    console.log('点击了按钮')
  }

  // 普通计算 list 的和
  console.log('普通计算')
  const sum = list.reduce((previous, current) => previous + current)

  // 缓存计算 list 的和
  const memoSum = useMemo(() => {
    console.log('useMemo 计算')
    return list.reduce((previous, current) => previous + current)
  }, [list])

  return (
    <div className="App">
      <div> sum:{sum}</div>
      <div> memoSum:{memoSum}</div>
      <button onClick={onClick}>重新渲染 App</button>
    </div>
  )
}

export default App
